<template>
  <div class="smf-model-page">
    <div class="page_content">
      <a-card :bordered="false" class="card-box">
        <a-form-model
          class="user-box"
          layout="horizontal"
          ref="ruleForm"
          :model="form"
          :rules="rules"
        >
          <div class="box">
            <div style="margin-top:0px;" class="title">基础设置</div>
            <div class="content">
              <a-form-model-item label="用户名" prop="username">
                <a-input
                  class="form-input"
                  placeholder="请填写"
                  disabled
                  v-model="form.username"></a-input>
              </a-form-model-item>
            </div>
          </div>
          <div class="box">
            <div class="title">安全设置</div>
            <div class="content">
              <a-form-model-item label="密码" prop="password">
                <a-input-password
                  class="form-input"
                  placeholder="请填写"
                  :disabled="!isEaitUserInfo"
                  v-model="form.password"
                ></a-input-password>
                <span class="changePwd" @click="changeShow = true">
                  修改密码
                </span>
              </a-form-model-item>
            </div>
          </div>
          <div class="upload_img">
            <a-form-model-item label="头像">
              <up-img
                class="upAvatar"
                :limitNum="1"
                @change="changePhoto"
                :defaultImageList="imgList"
              >
                <span slot="upload-text">上传头像</span>
              </up-img>
            </a-form-model-item>
          </div>
        </a-form-model>
      </a-card>
    </div>
    <a-modal
      v-model="changeShow"
      title="修改密码"
      on-ok="handleOk"
      :maskClosable="false"
    >
      <template slot="footer">
        <a-button key="back" @click="changeShow = false">
          取消
        </a-button>
        <a-button
          key="submit"
          type="primary"
          @click="handleSave">
          确认
        </a-button>
      </template>
<!--      <a-form-model ref="ruleForm2" :model="changePwd">
        <a-form-model-item label="原密码" prop="password">
          <a-input-password
            placeholder="原密码"
            v-model="form.password"
          ></a-input-password>
        </a-form-model-item>
        <a-form-model-item label="修改密码" prop="newPassword">
          <a-input-password
            placeholder="修改密码"
            v-model="form.newPassword"
          ></a-input-password>
        </a-form-model-item>
        <a-form-model-item label="确认密码" prop="surePassword">
          <a-input-password
            placeholder="确认密码"
            v-model="form.surePassword"
          ></a-input-password>
        </a-form-model-item>
      </a-form-model>-->
      <div>
        <div class="changePwdForm">
          <span class="cpf-title">旧密码</span>
          <a-input-password
            class="form-input"
            placeholder="旧密码"
            ref="pwd"
            @keyup.native.enter="focusNext('npwd')"
            v-model="changePwdInfo.password"
          ></a-input-password>
        </div>
        <div class="changePwdForm">
          <span class="cpf-title">新密码</span>
          <a-input
            class="form-input"
            placeholder="新密码"
            ref="npwd"
            type="password"
            @keyup.native.enter="focusNext('spwd')"
            v-model="changePwdInfo.newPassword"
          ></a-input>
        </div>
        <div class="changePwdForm">
          <span class="cpf-title">确认密码</span>
          <a-input
            class="form-input"
            ref="spwd"
            type="password"
            placeholder="确认密码"
            @keyup.native.enter="handleSave"
            v-model="changePwdInfo.surePassword"
          ></a-input>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
// 引用组件
import UpImg from '@/components/upload/upImg.vue'
import { mapState, mapActions, mapGetters } from 'vuex'
// // 网络请求

import { getUserInfo, editUserInfo } from '@/axios/api'
import { getToken, removeToken, setToken } from '@/utils/TokenOpers'
import { message } from 'ant-design-vue'
import notification from 'ant-design-vue/es/notification'

export default {
  name: 'PersonalCenter',
  components: {
    UpImg,
  },
  data() {
    return {
      // loading:false,
      // visible:true,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      isEaitUserInfo:false,
      form: { // 表单数据对象
        username:'',
        password: undefined,
        profileData:'',
        id:null
      },
      changePwdInfo: {
        password:'',//原密码
        newPassword:'',
        surePassword:''
      },
      rules: {
        username: [{ message: '请输入姓名' }],
        password: [{required: true, message: '请输入密码', trigger: 'blur'},
        { min: 6, message: '长度不小于6位', trigger: 'blur' },],
      },
      imgList: [], //默认显示的图片
      gender: '', //默认选择的性别
      imgIds: '',
      userId:null,
      changeShow:false
    }
  },
  async created() {
    let avatar = this.$store.getters.avatar
    if( !avatar)
      avatar = await getUserInfo({token:getToken()}).then(res => res.data.avatar)
    if(avatar) this.imgList.push(avatar)
  },
  methods: {
    changePhoto(e) {
      const profileData = e[0]
      if(profileData)
      editUserInfo({profileData})
      .then(e=>{
        this.$store.commit("setAvatar",profileData)
        this.$message.success("修改成功")
      })
    },
    handleSave(e) {
      const tags = ['旧密码','新密码','确认密码']
      let errInfo = undefined
      const values = Object.values(this.changePwdInfo)
      console.log(values)
      //依次判断
      values.every((e,i)=> {
        console.log(e,e=='')
        if (e == '') {
          errInfo = `请输入${tags[i]}`;
          return;
        }
        return true
      })
      console.log(`errInfo=${errInfo}`)
      if(!errInfo)
        values.every((e,i)=> {
          if(!/^.{6,14}/.test(e)) {
            errInfo = `${tags[i]}长度不规范（[6,14]）`;
            return;
          }
          return true
        })
      if (!errInfo && this.changePwdInfo.newPassword != this.changePwdInfo.surePassword)
        errInfo = `两次输入密码不一致`
	  else if(!errInfo && this.changePwdInfo.newPassword === this.changePwdInfo.password)
        errInfo = `与旧密码相同`
      console.log(`errInfo=${errInfo}`)
      if (errInfo){
	  	notification.error({
	  	  message: 'ERROR',
	  	  description: errInfo
	  	})
	  	return;
	  }
      const {password,newPassword} = this.changePwdInfo
      editUserInfo({password:newPassword,oldPwd:password})
      .then(e=>{
         this.$message
             .loading('修改成功,即将重新登录', 2.5)
             .then(() => {
               this.$router.push('/user')
             })
      })
      .catch(()=>{
        this.focusNext('pwd')
      })
    },
    focusNext(nextRef) {
      this.$refs[nextRef].focus()
    }

  }
}
</script>

<style lang="less" scoped>
.changePwdForm{//修改密码
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  .cpf-title{
    width: 80px;
  }
}
.smf-model-page{
  .smf-title{
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    padding-bottom:10px;
  }
  .page_content{
    height: calc(100vh - 45px);
    display: flex;
  }
}
.card-box{
  position: relative;
  padding: 20px;
  width: 100%;

  .top_btn{
    position: absolute;
    top: 0;
    left: 5px;
    display: flex;
    width: 100%;
    cursor: pointer;
    .activeHead{
      background-color: #3d78cd;
      color: #fff;
    }
    span{
      padding: 3px 15px ;
      text-align: center;
      border:1px solid #000;
      color: #000;
      font-size: 14px;
      border-radius: 0 0 10px 10px;
      margin: 0 5px;
    }
  }
}
.card-box{
.user-box{
  width: 50%;
  padding-top: 70px;
  margin:  0 auto;
  position: relative;
  .upload_img{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
  }
}
}
.upAvatar {
  border-radius: 50%;
}

.box {
  padding-top: 1px;
  padding-left: 10px;
  width: 100%;
  padding-bottom: 40px;
  // border-bottom: 1px solid #f2f2f2;
  .title {
    margin-top: 20px;
  }
  .title {
    width: 100%;
    margin-bottom: 20px;
    font-size: 16px;
    color: #59606a;
    font-weight: bold;
  }
  .content {
    width: 100%;
    .form-input {
      width: 50%;
    }
    .changePwd{
      margin-left: 5px;
      color: rgba(0,0,0,0.5);
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
      &:hover{
        color: #1890ff;
      }
    }
  }
}
.card {
  position: relative;
}
.close {
  display: block;
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 20px;
}
</style>
